<template>
<div class="order"> 
    <ul class="header__tab">
      <li class="header__tab__item" :class="{'header__tab__item__active': search.type == 'all0'}" @click="setSearchType('all0')">全部</li>
      <li class="header__tab__item" :class="{'header__tab__item__active': search.type == 'all1'}" @click="setSearchType('all1')">未付款</li>
      <li class="header__tab__item" :class="{'header__tab__item__active': search.type == 'all2'}" @click="setSearchType('all2')">已付款</li>
      <li class="header__tab__item" :class="{'header__tab__item__active': search.type == 'all3'}" @click="setSearchType('all3')">已送达</li>
      <li class="header__tab__item" :class="{'header__tab__item__active': search.type == 'all4'}" @click="setSearchType('all4')">已发货</li>
      <li class="header__tab__item" :class="{'header__tab__item__active': search.type == 'all5'}" @click="setSearchType('all5')">退换</li>
    </ul>
    <div class="search_box">
          <el-form :inline="true" :model="serchData" class="demo-form-inline">
              <el-form-item label="商品名称" prop="goodsName" :rules="[{ required: true, message: '请输入商品名称'}]">
                <el-input v-model="serchData.goodsName" placeholder="商品名称"></el-input>
              </el-form-item>
              <el-form-item label="客户名称" prop="supplyUser" :rules="[{ required: true, message: '请输入客户名称'}]">
                <el-input v-model="serchData.supplyUser" placeholder="客户名称"></el-input>
              </el-form-item>
              <el-form-item label="价格" prop="low_price" :rules="[{ required: true, message: '请输入最低价格'}]" >
                <el-col :span="2">
                  <el-input v-model="serchData.low_price"  placeholder="单行输入"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item>
                  <el-col class="line" :span="1">至</el-col>
              </el-form-item>
              <el-form-item label=""  prop="high_price" :rules="[{ required: true, message: '请输入最高价格'}]" >
                <el-col :span="2">
                  <el-input v-model="serchData.high_price"  placeholder="单行输入"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="配送时段" prop="startTime" :rules="[{ required: true, message: '请设置开始时间'}]">
                 <el-date-picker v-model="serchData.startTime" style="width:194px;" size="mini" type="date" placeholder="开始日期"></el-date-picker>
              </el-form-item>
              <el-form-item label="" prop="endTime" :rules="[{ required: true, message: '请设置结束时间'}]">
                 <el-date-picker v-model="serchData.endTime" style="width:194px;position:relative;left:-75px;" size="mini" type="date" placeholder="结束日期"></el-date-picker>
              </el-form-item>
              <el-form-item label="" prop="region"  :rules="[{ required: true, message: '请设置结束时间'}]">
                <el-select v-model="serchData.region" placeholder="路线筛选" style="position:relative;left:-85px;">
                  <el-option label="路线1" value="shanghai"></el-option>
                  <el-option label="路线2" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <button class="Ecp-button-primary search-button">搜索</button>
          </el-form>
    </div>
    <div class="main-body">
          <div class="Order__routes">
              <span class="Order__route">线路1:{{regin.first}}/9家</span>
              <span class="Order__route">线路2:{{regin.first}}/9家</span>
              <span class="Order__route">线路3:{{regin.first}}/9家</span>
          </div>
          <div class="Order__table__header">
              <div style="float:right;">
                <el-button size="mini" round>送达时间<i class="el-icon-caret-bottom el-icon--right"></i></el-button>
                <el-button size="mini" round>数量<i class="el-icon-caret-bottom el-icon--right"></i></el-button>
                <el-button size="mini" round>服务<i class="el-icon-caret-bottom el-icon--right"></i></el-button>
                <el-button size="mini" round>交易全额<i class="el-icon-caret-bottom el-icon--right"></i></el-button>
              </div>
              <div class="Order__table__header__left">
                <el-checkbox>全选</el-checkbox>
                <button class="Ecp-button-primary" style="margin-left:28px;height:28px;">发货</button>
                <button class="Ecp-button-primary" style="margin-left:18px;height:28px;">关闭</button>
              </div>
        </div>
        <div class="product-list">
            <el-table ref="multipleTable" :data="tableData3" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="产品" width="220">
                  <div class="product" slot-scope="scope">{{ scope.row.date }}
                         <img class="product__img" :src="scope.row.imgUrl" alt="">
                         <div class="product__right">
                            <p class="product__name">{{scope.row.name}}</p>
                            <p class="product__name">{{scope.row.name}}</p>
                            <p class="product__id">ID：{{scope.row.id}}</p>
                            <p class="product__shop">
                              <el-tooltip class="item" effect="dark" content="13476091158" placement="top-start">
                                <i class="el-icon-phone"></i>
                              </el-tooltip>
                              <span>客户名称客户名称</span>
                            </p>
                          </div>
                  </div>
                </el-table-column>
                <el-table-column prop="name" label="是否付款" width="150">
                    <div slot-scope="scope">
                      <span>{{ scope.row.status==0?'未付款':'已付款' }}</span>
                    </div>
                </el-table-column>
                <el-table-column prop="address" label="线路"  width="150">
                    <div slot-scope="scope">
                      <span>{{ scope.row.router}}</span>
                    </div>
                </el-table-column>
                <el-table-column prop="address" label="送达时间" width="250" >
                    <div slot-scope="scope">
                      <span>{{ scope.row.time}}</span>
                    </div>
                </el-table-column>
                <el-table-column prop="address" label="服务"  width="100"  >
                    <div slot-scope="scope">
                      <span>{{ scope.row.service}}</span>
                    </div>
                </el-table-column>
                <el-table-column prop="address" label="交易全额"  width="100" show-overflow-tooltip >
                    <div slot-scope="scope">
                      <span>{{ scope.row.price}}</span>
                    </div>
                </el-table-column>
            </el-table>
            <div class="block" style="margin-top:15px;text-align: center;">
                  <el-pagination layout="prev, pager, next" :total="50">
                  </el-pagination>
            </div>
        </div>
    </div>
</div>
  
</template>
<script>
import testImg from '~/static/images/de.png'
import {findGoodsOrderInfoList} from "~/api/apiv1"
export default {
  data(){
    return{
          search: {type: 'all0'},
          serchData:{
            goodsName:'',
            supplyUser:'',//供应商名
            low_price:'',
            high_price:'',
            date1:'',
            date2:'',
            startTime:'',
            endTime:'',
            region:'',
            isOnSale:'',//商品状态 1.待上架 2.上架 3.下架
            isReal:'',//是否发布 1.上架(售卖中) 2售完下架 3人工下架
            shopId:'',//	店铺id
            catId:'',//平台Id
            consignee:'',//收货人
            orderStatus:'',//订单状态 
            shippingStatus:'',//发货状态    已送达   已发货  退换 
            pay_status:'',//付款状态  已付款  未付款
            rank:'2',//1  降序   2 升序
            rankName:'',//排名字段
          },
          regin:{
            first:'999件',
            second:'999件',
            three:'999件',
          },
          tableData3: [{
              id: '123',
              name: '本草纲目',
              imgUrl: testImg,
              status: 1,
              router: '线路1',
              time: '送达时间2018-05-0312：00',
              service: '回空100x1',
              price: '900'
            },
            {
              id: '1234',
              name: '本草纲目1',
              imgUrl: testImg,
              status: 0,
              router: '线路1',
              time: '送达时间2018-05-0312：00',
              service: '回空100x1',
              price: '900'
          },
          {
              id: '12345',
              name: '本草纲目1',
              imgUrl: testImg,
              status: 1,
              router: '线路1',
              time: '送达时间2018-05-0312：00',
              service: '回空100x1',
              price: '900'
          }],
         multipleSelection: [],
    }
  },
  methods:{
    setSearchType (type) {
        this.search.type = type
      },
    handleSelectionChange(val) {
        this.multipleSelection = val;
      },
    mounted(){
        this.goodlist();
      },
    async goodlist(){
     const res= await findGoodsOrderInfoList (
        this.serchData.low_price,
        this.serchData.high_price,
        this.serchData.startTime,
        this.serchData.endTimd,
        this.serchData.consignee, 
        this.serchData.orderStatus,
        this.serchData.shippingStatus,
        this.serchData.pay_status,
        this.serchData.rank,
        this.serchData.rankName,
        this.serchData.supplyUser,
        this.serchData.goodsName)
         if(res.code==='0'){

         }                                 
     }
  }
}
</script>
<style lang="scss" scoped>
.order{
   .search_box{
    width:95%;
    background-color: #fff;
    margin: 0 auto;
    margin-top:20px;
    padding:10px 20px;
    border-bottom: 1px solid #bdbdbd;
    & /deep/ {
      .el-input__inner{
            height: 25px;
            line-height: 25px;
            border-radius: 9px;
            background-color: #f0f5fb;
            border: none;
            text-align: center;
            width: 120px; 
      }
    }
    .search-button{
      position:relative;
      top:-20px;
      left:250px;
    }
  }
  .main-body{
     width:95%;
     background-color:#fff;
     padding:10px 20px;
     margin:0 auto;
     .Order__routes{
       padding:15px  0;
       &:before {
            content: "";
            display: block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #333856;
            position: absolute;
            top: 26px;
            left: 29px;
          }
       .Order__route{
         margin-right: 35px;
       }
     }
    .order__table_header {
      height: 58px;
      line-height: 28px;
      padding: 15px 26px;
      & /deep/ {
        .el-button {
          background-color: #f0f5fb;
          border: none;
        }
      }
    }
    .product-list{
      .product{
       .product__img{
          float: left; 
        }
          .product__right{
          float: right; 
        }

      }
      & /deep/{
        .el-table th.is-leaf, .el-table td {
            text-align: center;
        }
      }
    }
  }
}


</style>


